<template>
  <div class="Bigbox">
    <!-- 标题 -->
    <!-- 表单输入部分 -->
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="auto" class="login-form">
      <div class="title-container">
        <h3 class="title">学之思管理系统</h3>
      </div>
      <el-form-item label="" prop="username">
        <el-input class="input iptOne" ref="userName" v-model="ruleForm.username" placeholder="用户名" name="userName"
          type="text" tabindex="1" auto-complete="on" />
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input class="input iptTwo" type="password" v-model="ruleForm.password" placeholder="密码" autocomplete="off"
          :key="passwordType" 
          @keyup.native="checkCapslock"></el-input>
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="ruleForm.remember" style="margin-bottom: 20px;margin-left: 5px;">记住密码</el-checkbox>

        <el-button class="btn" style="width:100%;margin-bottom:30px;" type="primary"
        @click.native.prevent="handleLogin">提交</el-button>
      </el-form-item>
    </el-form>
    <!-- <button @click="daying()"></button> -->
  </div>
</template>
<script>
import link from "@/api/login"
// import { useRouter } from "vue-router"
export default {
  data() {
// let router = useRouter()
    // 简单的判断input输入内容
    const validateuser = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('用户名不能少于5个字符'))
      } else {
        callback()
      }
    };
    // 简单的判断input输入内容
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能少于5个字符'))
      } else {
        callback()
      }
    };
    return {
      ruleForm: {
        username: '',
        password: '',
        remember: false,
      },
      loginlist:[],
      denglu:false,
      // 失去焦点触发
      rules: {
        username: [
          { validator: validateuser, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      passwordType: 'password',
    };
  },
  methods: {
    // 密码规则
    checkCapslock ({ shiftKey, key } = {}) {
      if (key && key.length === 1) {
        // eslint-disable-next-line no-mixed-operators
        if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
          this.capsTooltip = true
        } else {
          this.capsTooltip = false
        }
      }
      if (key === 'CapsLock' && this.capsTooltip === true) {
        this.capsTooltip = false
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    //登录验证
    handleLogin(){
      // console.log(this.loginlist[0].password)
      // console.log(this.ruleForm.username,"昵称")
      // console.log(this.ruleForm.password,"密码")

      this.loginlist.forEach(item =>{
        // console.log(item.userName)
        if(this.ruleForm.password===item.password  && this.ruleForm.username === item.userName){
          this.denglu = true
          console.log(this.denglu);
        }else{
          return
        }
       
      })
     if(this.denglu === true){
      this.$message({
          message: '登录成功',
          type: 'success'
        });
      this.denglu= false
      this.$router.push({path:'/'})
     }else{
      this.$message.error('账号或密码错误');
     }
    },
  },
created(){
 
  link("/login", "GET",).then((res) => {
    console.log(res)
    this.loginlist = res.data
    console.log(this.loginlist)
    console.log(this.$store.state.denglu)
  })

}
}

</script>

<style lang="scss" scoped>
html,
body {
  width: 100%;
  height: 100%;
}

.Bigbox {
  width: 100%;
  height: 100%;
  // text-align: center;
  position: relative;
  background-color: #2d3a4b;
  overflow: hidden;
}



.title-container {
  position: relative;

  .title {
    font-size: 26px;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
    color: #fff;
  }
}

.input {
  background: transparent;
  border: 0px;
  padding: 12px 5px 12px 15px;
  border-radius: 0px;
  caret-color: #fff;
  width: 100%;
  height: 47px;
  color: #3d4855;
}

.login-form {
  position: relative;
  width: 520px;
  max-width: 100%;
  padding: 30px 50px 10px 50px;
  margin: 120px auto auto auto;
  overflow: hidden;
  background: rgba(252, 254, 255, 0.11)
}
</style>